<template>
  <div class="document-container">
    <div class="police-agency">{{ result.policeAgencyName }}</div>
    <div class="hr"></div>
    <div class="attachment">附件一</div>

    <div class="document-wrap">
      <section>
        <div class="document-police-agency">{{ result.policeAgencyName }}</div>
        <div class="document-title">责令改正通知书</div>
        <div class="document-number">
          {{ result.postShopName }}行罚决字 【{{ get_date_info(result.checkTime, 1) }}】 {{ result.orderNo }}号
        </div>
        <span class="store-name">{{ result.companyName }} :</span>
        <div class="mian-text">
          根据<span>{{ result.industryLegalBasis }}</span> ，我所于 <u> {{ get_date_info(result.checkTime, 1) }} </u>年
          <u> {{ get_date_info(result.checkTime, 2) }}</u>
          月<u> {{ get_date_info(result.checkTime, 3) }} </u>日对你单位(场所)进行<span>{{
            result.industryExamineName
          }}</span
          >，发现你单位(场所)<span v-html="main_text"></span>现责令改正:
        </div>
      </section>

      <section class="illegal-container">
        <div class="illegal-wrap" v-for="(item, index) in result.checkCategoryInfoList" :key="index">
          <div class="illegal">{{ item.industryExamineCategoryName }}</div>
          <div
            :key="index"
            class="illegal-context"
            :class="Iterator.pass == 0 ? 'check' : ''"
            v-for="(Iterator, index) in item.checkDetailInfoList"
          >
            <a-checkbox :checked="Iterator.pass == 0" style="margin-right: 5px"></a-checkbox>{{ Iterator.sortOrder }}.
            {{ Iterator.industryExamineDetailName }}
          </div>
        </div>
      </section>

      <section class="correct">
        对上述检查不合格项，责令你单位(场所)于 <u> {{ get_date_info(result.penaltyEndTime, 1) }} </u>年
        <u> {{ get_date_info(result.penaltyEndTime, 2) }} </u>月
        <u> {{ get_date_info(result.penaltyEndTime, 3) }} </u>日前改正。
        改正期间，你单位(场所)应当采取措施，确保消防安全，对消防安全违法行为，将依法予以处罚。
      </section>

      <section class="official-seal flex align-center justify-between">
        <div class="police-sign flex align-center">
          <span class="common-font">被检查单位(场所)签收:</span>
          <img class="principalSignatureUrl" :src="imgPrefix + result.principalSignatureUrl" />
        </div>
        <div class="police-seal flex column justify-between">
          <div class="seal-police-agency common-font">派出所公章</div>
          <!-- <div class="date-zh common-font">{{ format_date_to_chinese(result.checkTime) }}</div> -->
          <div class="date-en common-font">
            <span>{{ get_date_info(result.checkTime, 1) }}</span
            >年<span>{{ get_date_info(result.checkTime, 2) }}</span
            >月<span>{{ get_date_info(result.checkTime, 3) }}</span
            >日
            <!-- <span>{{ get_date_info(result.checkTime, 4) }}</span>
            时<span>{{ get_date_info(result.checkTime, 4) }}</span
            >分 -->
          </div>

          <img :src="imgPrefix + result.areaElectronicSignature" class="areaElectronicSignature" />
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { findEnableDictItemsbyCode } from '@/api/api'
export default {
  name: 'printPDF',
  data() {
    return {
      chineseNumberMap: {
        0: '〇',
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
      },
      result: {},
      main_text: '',
      imgPrefix: '',
    }
  },
  mounted() {
    this.hide_top()
    this.get_dict()
    let unqualifiedId = this.$route.query.id
    this.get_doc_details(unqualifiedId)
  },
  methods: {
    hide_top() {
      console.log('gigigigi')

      document.getElementsByClassName('ant-layout-header')[0].style.display = 'none'
      document.getElementsByTagName('body')[0].style.background = '#fff'
      document.getElementsByClassName('ant-layout-content')[0].style.background = '#fff'
    },

    get_date_info(dateTimeString, type) {
      const date = new Date(dateTimeString)
      switch (type) {
        case 1:
          return date.getFullYear()
        case 2:
          return date.getMonth() + 1 // 注意月份要加1
        case 3:
          return date.getDate()
        case 4:
          return date.getHours()
        case 5:
          return date.getMinutes()
        case 6:
          return date.getSeconds()
        default:
          return null // 未知的类型
      }
    },

    format_date_to_chinese(dateString) {
      if (!dateString) return
      dateString = dateString.split(' ')[0]
      const dateParts = dateString.match(/\d+/g)

      if (dateParts && dateParts.length === 3) {
        const year = dateParts[0]
        const month = dateParts[1]
        const day = dateParts[2]

        const formattedYear = year
          .split('')
          .map((char) => this.chineseNumberMap[char])
          .join('')
        const formattedMonth = month
          .split('')
          .map((char) => this.chineseNumberMap[char])
          .join('')
        const formattedDay = day
          .split('')
          .map((char) => this.chineseNumberMap[char])
          .join('')

        return `${formattedYear}年${formattedMonth}月${formattedDay}日`
      }

      return dateString // 如果输入不合法，直接返回原始字符串
    },

    async get_dict() {
      let res = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = res.result[0].value
    },

    async get_doc_details(unqualifiedId) {
      let { result } = await getAction('/police/check_task/electronic_records', { unqualifiedId })
      this.result = result
      this.find_unPass(result.checkCategoryInfoList)
    },

    find_unPass(list) {
      this.main_text = ''

      list.forEach((item) => {
        // 判断是否所有 pass 都不等于零
        const allPassed = item.checkDetailInfoList.every((detail) => detail.pass !== 0)

        // 如果有等于零的 pass，则拼接
        if (!allPassed) {
          const sortOrderArray = item.checkDetailInfoList
            .reduce((result, item) => (item.pass === 0 ? [...result, item.sortOrder] : result), [])
            .join('、')

          this.main_text +=
            `<u>${item.industryExamineCategoryName}</u>` + '存在下列第' + `<u>${sortOrderArray}</u>` + '项违法行为，'
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
hr {
  color: #d3d3d3;
}
.document-container {
  background-color: #ffffff;
  width: 12.4rem;
  padding: 0.5rem;
  padding-top: 0.44rem;
  margin: 0 auto;
  font-family: PingFang SC-Medium, PingFang SC;

  .police-agency {
    font-size: 0.14rem;
    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
    font-weight: bold;
    color: #9b9b9b;
    text-align: right;
    padding-bottom: 0.12rem;
  }

  .hr {
    width: 100%;
    border: 1px solid #dcdcdc;
  }

  .attachment {
    font-size: 0.18rem;
    font-weight: 500;
    color: #9b9b9b;
    margin: 0.18rem 0.2rem;
  }
}

.document-wrap {
  border: 1px solid #8a1616;
  padding: 0.46rem;
  .document-police-agency {
    font-size: 0.24rem;
    font-weight: 500;
    color: #9e520a;
    text-align: center;
  }

  .document-title {
    font-size: 0.4rem;
    font-family: Source Han Serif CN-Bold, Source Han Serif CN;
    font-weight: bold;
    color: #9e520a;
    text-align: center;
    margin-top: 0.1rem;
  }

  .document-number {
    font-size: 0.24rem;
    font-weight: 500;
    color: #232222;
    text-align: right;
    margin-top: 0.22rem;
  }

  .store-name {
    display: inline-block;
    font-size: 0.22rem;
    font-weight: 500;
    color: #000000;

    border-bottom: 1px solid #8d1b1b;
  }

  .mian-text {
    text-indent: 40px;
    margin-top: 0.26rem;
    font-size: 0.22rem;
    font-weight: 500;
    color: #666666;

    u {
      font-weight: bold;
      color: #333333;
    }
  }

  .illegal-container {
    font-size: 0.18rem;
    margin-top: 0.18rem;

    .illegal {
      font-weight: bold;
      color: #333333;
    }

    .illegal-context {
      padding-left: 0.44rem;
      font-weight: 500;
      color: #666666;
      margin: 0.1rem 0;
    }

    /deep/ .ant-checkbox-checked > .ant-checkbox-inner {
      border-color: #b95054;
    }

    /deep/ .ant-checkbox-wrapper {
      color: #b95054;
      .ant-checkbox-inner {
        background: transparent;
      }

      .ant-checkbox-inner::after,
      .ant-checkbox-checked::after {
        border-color: #b95054;
      }
    }

    .check {
      color: #b95054;
    }
  }

  .correct {
    font-size: 0.22rem;
    font-weight: 500;
    color: #666666;
    margin-top: 0.18rem;
    margin-bottom: 0.4rem;
  }

  .official-seal {
    padding-top: 30px;
    page-break-inside: avoid;

    .common-font {
      font-size: 0.22rem;
      color: #232222;
      text-align: right;
    }

    .principalSignatureUrl {
      width: 1.93rem;
      height: 0.94rem;
      object-fit: contain;
    }

    .police-seal {
      position: relative;
    }

    .areaElectronicSignature {
      width: 2.3rem;
      height: 2.3rem;
      object-fit: cover;
      margin-top: -75px;
      margin-right: -40px;
    }
  }
}
</style>
